<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="imgs">
<img :src="imgLeft" v-show="img>0" @click="ago" >
<img :src="imgContent">
<img :src="imgRight" v-show="img<10" @click="next">
</div>
</body>
<script>
  var app= new Vue({

        el:"#imgs",
      data:{
          img:0,
          imgLeft: "images/prev.png",
          imgRight:"images/next.png",
          imgContent:"images/0"+0+".jpg"
      },
      methods:{
            ago:function () {
                this.imgContent="images/0"+(this.img-1)+".jpg";
                this.img=this.img-1;
            },
          next:function () {
                if (this.img==9){
                    this.imgContent="images/10.jpg"
                    this.img=10
                }else {
                    this.imgContent = "images/0" + (this.img + 1) + ".jpg"
                    this.img = this.img + 1;
                }

          }
      }


    })
</script>
</html>